<template>
  <footer class="footer">
    <span class="todo-count"
      >剩余<strong>{{ count }}</strong></span
    >
    <ul class="filters" @click="$emit('switch-todo', type)">
      <li>
        <a 
        :class="{ selected: type === 'all' }" 
        @click="type='all'"
        href="javascript:;">全部</a>
      </li>
      <li>
        <a 
        :class="{ selected: type === 'no' }" 
        @click="type='no'"
        href="javascript:;">未完成</a>
      </li>
      <li>
        <a 
        :class="{ selected: type === 'yes' }" 
        @click="type='yes'"
        href="javascript:;">已完成</a>
      </li>
    </ul>
    <button class="clear-completed"
    @click="clearFn"
    >清除已完成</button>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      type: "all", //yes,no
    };
  },
  props: ["farr"],
  computed: {
    count() {
      return this.farr.length;
    },
  },
  methods: {
      clearFn(){
          if(window.confirm('确认清除么')){
              this.$emit('clear-todo')
          }
      }
  }
};
</script>